<template>

  <div class="ui attached pointing menu">
    <div class="ui container">
      <div class="right menu">
        <a href="/admin/blog-input" class=" item">发布</a>
        <a href="/admin/blog" class="teal active item">列表</a>
      </div>
    </div>
  </div>

  <!--中间内容-->
  <div  class="m-container-small m-padded-tb-big">
    <div class="ui container">
      <div  class="ui secondary segment form">
        <input type="hidden" name="page" >
        <div class="inline fields">
          <div class="field">
            <input v-model="title" type="text" name="title" placeholder="标题">
          </div>
          <div class="field">
            <div class="ui labeled action input">
              <div class="ui type selection dropdown">

                <el-select v-model="typeId" placeholder="请选择类型" style="width: 200px !important;">
                  <el-option
                      v-for="item in types"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  >
                  </el-option>
                </el-select>

<!--                <input type="hidden" name="typeId">-->
<!--                <i class="dropdown icon"></i>-->
<!--                <div class="default text">分类</div>-->
<!--                <div class="menu">-->
<!--                  <div class="item" data-value="1">错误日志</div>-->
<!--                  &lt;!&ndash;/*&ndash;&gt;-->
<!--                  <div class="item" data-value="2">开发者手册</div>-->
<!--                  &lt;!&ndash;*/&ndash;&gt;-->
<!--                </div>-->
              </div>
              <button @click="clear" id="clear-btn" class="ui compact button">clear</button>
            </div>

          </div>
          <div class="field">
            <div class="ui checkbox">
              <input v-model="recommend" type="checkbox" id="recommend" name="recommend">
              <label for="recommend">推荐</label>
            </div>
          </div>
          <div class="field">
            <button @click="search(this.curPage)" type="button" id="search-btn" class="ui mini teal basic button"><i class="search icon"></i>搜索</button>
          </div>
        </div>
      </div>
      <div id="table-container">
        <table class="ui compact teal table">
          <thead>
          <tr>
            <th></th>
            <th>标题</th>
            <th>类型</th>
            <th>推荐</th>
            <th>状态</th>
            <th>更新时间</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(blog,index) in blogs">
            <td>{{index}}</td>
            <td>{{blog.title}}</td>
            <td>{{blog.type.name}}</td>
            <td v-if="blog.recommend">是</td>
            <td v-else>否</td>
            <td v-if="blog.published">发布</td>
            <td v-else>草稿</td>
            <td>{{dateFormat1(blog.updateTime)}}</td>
            <td>
              <a style="cursor:pointer" @click="editBlog(blog.id)" class="ui mini teal basic button">编辑</a>
              <a style="cursor:pointer" @click="deleBlog(blog.id)" class="ui mini red basic button">删除</a>
            </td>
          </tr>
          </tbody>
          <tfoot>
          <tr>
            <th colspan="7">
              <div class="ui mini pagination menu">
                <div v-if="preBoolean">
                  <a @click="search(this.curPage-1)" class="item">上一页</a>
                </div>
                <div v-if="nexBoolean">
                  <a @click="search(this.curPage+1)" class=" item">下一页</a>
                </div>
              </div>
              <a href="/admin/blog-input" class="ui mini right floated teal basic button">新增</a>
            </th>
          </tr>
          </tfoot>
        </table>


        <div v-if="success">
          <div class="ui success message">
            <i @click="close" class="close icon"></i>
            <div class="header">提示：</div>
            <p>恭喜，操作成功！</p>
          </div>
        </div>

      </div>

    </div>
  </div>

  <br>
  <br>

</template>

<script>
import axios from "axios";

export default {
  name: "AdminBlog",
  data(){
    return{
      blogs: [],
      types: [],
      typeId: '',
      recommend: true,
      success: false,
      preBoolean: '',
      nexBoolean: '',
      curPage: '',
      title: ''
    }
  },
  mounted() {
    this.$store.commit('setAo1');
    // this.success = sessionStorage.getItem('blogSuccess');
    this.getBlogs();
    this.getTypes();
  },
  methods:{
    search(page){
      // alert(this.recommend);
      if (this.recommend === ''){
        this.recommend = false;
      };
      let id
      if (this.typeId === ''){
        id = -2;
      }else {
        id = this.typeId;
      }

      axios({
        method:"post",
        url:"http://localhost:7070/search/"+page,
        data:{
          recommend: this.recommend,
          typeId: this.typeId,
          title: this.title
        }
      }).then((res)=>{
        console.log(res.data);
        this.blogs = res.data.page;
        this.curPage = res.data.curPage;
        this.preBoolean = res.data.preBoolean;
        this.nexBoolean = res.data.nexBoolean;
      });
    },
    clear(){
      this.typeId = '';
    },
    editBlog(id){
      this.$store.commit('setBlogId',id);
      this.$store.commit('setEdit');
      this.$router.push({path: '/admin/blog-input'});
    },
    deleBlog(id){
      axios.get('http://localhost:7070/blog/delete/'+id).then((res)=>{
        this.success = true;
        axios.get('http://localhost:7070/top-blogs/0').then((res)=>{
          this.blogs = res.data.page;
          this.curPage = res.data.curPage;
          this.preBoolean = res.data.preBoolean;
          this.nexBoolean = res.data.nexBoolean;
          console.log(res.data);
          // alert(this.blog.user);
        })
      });
    },
    dateFormat1(time) {
      var date=new Date(time);
      var year=date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
      var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
      var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
      var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
      var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
      // 拼接
      return year+"-"+month+"-"+day+" "+hours+":"+minutes;
      // return year+"-"+month+"-"+day;
    },
    getBlogs(){
      let temp = sessionStorage.getItem('blogSuccess');
      if (temp === "0"){
        this.success = false;
      }else {
        this.success = true;
      }
      // alert(sessionStorage.getItem('blogSuccess'));
      sessionStorage.setItem("blogSuccess","0");
      axios.get('http://localhost:7070/top-blogs/0').then((res)=>{
        this.blogs = res.data.page;
        this.curPage = res.data.curPage;
        this.preBoolean = res.data.preBoolean;
        this.nexBoolean = res.data.nexBoolean;
        console.log(this.blogs);
        // alert(this.blog.user);
      })
    },
    getPreBlogs(){
      axios.get('http://localhost:7070/top-blogs/'+(this.curPage-1)).then((res)=>{
        this.blogs = res.data.page;
        this.curPage = res.data.curPage;
        this.preBoolean = res.data.preBoolean;
        this.nexBoolean = res.data.nexBoolean;
        console.log(this.blogs);
        // alert(this.blog.user);
      })
    },
    getNextBlogs(){
      axios.get('http://localhost:7070/top-blogs/'+(this.curPage+1)).then((res)=>{
        this.blogs = res.data.page;
        this.curPage = res.data.curPage;
        this.preBoolean = res.data.preBoolean;
        this.nexBoolean = res.data.nexBoolean;
        console.log(this.blogs);
        // alert(this.blog.user);
      })
    },
    getTypes(){
      axios.get('http://localhost:7070/tag-type').then((res)=>{
        // console.log(res.data);
        this.types = res.data.types;
      });
    },
    close(){
      this.success = false;
    }
  }
}
</script>

<style scoped>

</style>